$(function () {
  /* 实现用户点击搜索按钮时跳转到搜索结果也
  1.给搜索按钮添加点击事件
  2.获取用户输入的关键字
  3.判断用户时候输入了搜索关键字
  4.如果用户没有输入 阻止跳转 并给出提示
  5.如果用户输入了 跳转到这个页面,并且将用户输入的关键字带过去
   */
  $("#search-btn").on("tap", function () {

    var keyword = $(this).siblings('input').val();
    if (keyword) {
      if (keyArr.indexOf(keyword) !== -1) {
        location.href = "search-result.html?keyword=" + keyword;
        return;
      }
      //将用户输入的关键字存储
      keyArr.push(keyword);
      //存储在localstorage中,将关键字数组存储在本地
      localStorage.setItem('keyArr', JSON.stringify(keyArr));
      // location.href = "search-result.html";
      location.href = "search-result.html?keyword=" + keyword;
    } else {
      alert("shuru");
    }
  });

  /* 实现历史关键字存储
    1.准备存储关键字的数组
    2.当用户点击按钮的时候将关键字追加到数组中
    3.将数组存储在本地存储中
    4.在页面一上来的时候,判断本地存储中是否已经有存储的关键字
    5.将数据和html拼接 将数据展示到页面中
  */
  //存储关键字的数组
  var keyArr = [];

  if (localStorage.getItem('keyArr')) {
    keyArr = JSON.parse(localStorage.getItem('keyArr'));
    $('#history-box').html(template('historyTpl', {
      result: keyArr
    }));
  }

  /* 实现清空历史
  1.给元素添加点击事件
  2.清零页面中的数据 清空本地的数据
  */
  $("#clearBtn").on("click", function () {
    $("#history-box").html("");
    localStorage.removeItem("keyArr");
  })

});